<template>
  <div class="box">
    <div class="left">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="date" label="植被名称"> </el-table-column>
        <el-table-column prop="name" label="病虫害名称"> </el-table-column>
        <el-table-column prop="address" label="起始时间"> </el-table-column>
        <el-table-column prop="address" label="终止时间"> </el-table-column>
        <el-table-column prop="address" label="易发生时间"> </el-table-column>
        <el-table-column prop="address" label="温度下限"> </el-table-column>
        <el-table-column prop="address" label="温度上限"> </el-table-column>
        <el-table-column prop="address" label="降水下限"> </el-table-column>
        <el-table-column prop="address" label="降水上限"> </el-table-column>
        <el-table-column prop="address" label="日照数"> </el-table-column>
        <el-table-column prop="address" label="防治措施"> </el-table-column>
        <el-table-column prop="address" label="区县"> </el-table-column>
      </el-table>
    </div>
    <div class="right">
      <div>
        <span>植被名称</span>
        <el-select v-model="value" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <div>
        <span>病虫害名称</span>
        <el-select v-model="value" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <div>
        <span>起始时间</span>
        <el-date-picker v-model="value1" type="date" placeholder="选择日期">
        </el-date-picker>
      </div>
      <div>
        <span>终止时间</span>
        <el-date-picker v-model="value1" type="date" placeholder="选择日期">
        </el-date-picker>
      </div>
      <div>
        <span>易发时间</span>
        <el-date-picker v-model="value1" type="date" placeholder="选择日期">
        </el-date-picker>
      </div>
      <div>
        <span>温度下限</span>
        <el-input type="text"></el-input>
      </div>
      <div>
        <span>温度上限</span>
        <el-input type="text"></el-input>
      </div>
      <div>
        <span>降水下限</span>
        <el-input type="text"></el-input>
      </div>
      <div>
        <span>降水下限</span>
        <el-input type="text"></el-input>
      </div>
      <div>
        <span>光照数</span>
        <el-input type="text"></el-input>
      </div>
      <div>
        <span>防治措施</span>
        <el-input
          type="textarea"
          :rows="2"
          placeholder="请输入内容"
          v-model="textarea"
        >
        </el-input>
      </div>
      <div>
        <span>关联起点</span>
        <el-input
          type="textarea"
          :rows="2"
          placeholder="请输入内容"
          v-model="textarea"
        >
        </el-input>
      </div>
      <div>
        <el-button type="small">选取站点</el-button>
      </div>
      <div>
        <el-button type="small">查询</el-button>
        <el-button type="small">添加</el-button>
      </div>
      <div>
        <el-button type="small">删除</el-button>
        <el-button type="small">修改</el-button>
      </div>
      <div>
        <el-button type="small">导出Excel</el-button>
        <el-button type="small">批量导入</el-button>
      </div>
    </div>
  </div>
</template>
<script></script>
<style scoped lang="less">
.a {
  width: 100%;
  height: 100%;
}
.left {
  width: 70%;
  float: left;
}
.right::-webkit-scrollbar {
  display: none;
}
.right {
  width: 30%;
  height: 700px;
  border: 1px solid #dedede;
  box-sizing: border-box;
  float: right;
  display: flex;
  flex-direction: column;
  font-size: 10px;
  align-items: center;
  overflow-y: auto;
  span {
    margin-right: 10px;
    width: 100px;
  }
  div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 5px;
    .el-select,
    .el-date-editor,
    .el-input,
    .el-textarea {
      width: 200px;
    }
  }
}
</style>
